<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>组织机构</title>
    <meta name="description" content="组织机构">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="assets/js/jquery.min.js"></script>
    <script>
        let name = sessionStorage.getItem("username");
        if (name === null) {
            alert("您还未登录，请登录！");
            window.location.href = "login.html";
        }
    </script>
    <style>
    #form3 label{
        padding-right: 30px;
    }
    #form1 label{
        padding-right: 30px;
    }
    </style>
</head>
<body data-type="index">
<script src="assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 头部 -->
<div id="personSettings"></div>
<header class="main_header">

    <!-- 右侧内容 -->
    <div class="tpl-header-fluid">
        <!-- 其它功能-->
        <div class="am-fr tpl-header-navbar">
            <ul>
                <!-- 欢迎语 -->
                <li class="am-text-sm tpl-header-navbar-welcome">
                    <a href="javascript:;">欢迎你, <span id="name"></span> </a>
                </li>
                <!--个人设置-->
                <li class="am-text-sm" data-am-modal="{target: '#settings'}" onclick="settings()">
                    <a href="javascript:;">
                        <span class="am-icon-user"></span> 个人设置
                    </a>
                </li>

                <!--退出系统-->
                <li class="am-text-sm" onclick="exit()">
                    <a href="javascript:;">
                        <span class="am-icon-sign-out"></span> 退出系统
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="am-panel am-panel-default" id="postId">
            <div class="am-panel-bd" style="display: flex;justify-content: flex-start;align-items: center">
                <a class="flexMenu" href="user.html">
                    <img src="assets/img/yhgl.png">
                    <p>用户管理</p>
                </a>
                        
                <a class="flexMenu " href="shenfen.html">
                    <img src="assets/img/sfgl.png">
                    <p>角色管理</p>
                </a>
                
                <a class="flexMenu " href="access.html">
                    <img src="assets/img/access.png">
                    <p>权限管理</p>
                </a>
                
                <a class="flexMenu menu-bg" href="danwei.html" rules="zuz"> 
                    <img src="assets/img/chuque.png">
                    <p>组织机构</p>
                </a>
                    
                <a class="flexMenu " href="data_dictionary.html">
                    <img src="assets/img/sjzd.png">
                    <p>积分项管理</p>
                </a>

                <div class="flexMenu" id="backup">
                    <img src="assets/img/backup.png">
                    <p>返回</p>
                </div>
            </div>
        </div>
        <div class="row-content am-cf bg">
            <div class="widget-head am-cf">
                <button type="button" class="am-btn am-btn-sm am-radius am-btn-secondary quan_xian" rules="danwei_add" data-am-modal="{target: '#modal1'}">新增</button>
                <button type="button" class="am-btn am-btn-sm am-radius am-btn-success quan_xian" rules="danwei_bao" id="save">保存</button>
                <button type="button" class="am-btn am-btn-sm am-radius am-btn-danger quan_xian" rules="danwei_del" id="delete">删除</button>
            </div>
            <div class="row am-cf" style="padding: 0 10%;">
                <div id="tpl-echarts"></div>
                <h1 class="am-lg-text-center add">组织机构</h1>
                <div class="am-u-lg-4 am-u-md-12" style="height: 450px;overflow: auto;">
                    <div>
                        <ul id="treeDemo" class="ztree" style="background-color: #cccccc2e; border-radius: 5px"></ul>
                    </div>
                </div>
                <div class="am-u-lg-8 am-u-md-12" style="padding: 0 5%">
                    <form class="am-form am-form-horizontal"
                          style="background-color: #cccccc2e; border-radius: 5px;padding: 5% 0;" id="form1">
                        <input type="hidden" id="treeId" value="">
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">单位编号</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <input type="text" id="organ_no" class="am-radius" placeholder="">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">单位名称</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <input type="text" id="organ_name" class="am-radius" placeholder="">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">联系人</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <input type="text" id="short_name" class="am-radius" placeholder="">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">单位电话</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <input type="text" id="tel" class="am-radius" placeholder="">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">联系人电话</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <input type="text" id="work_tel" class="am-radius" placeholder="">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">地址</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <input type="text" id="email" class="am-radius" placeholder="">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">上级组织</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <div class="am-input-group">
                                    <input type="text" disabled class="am-form-field" id="pname">
                                    <input type="hidden" id="pid">
                                    <span class="am-input-group-btn"><button data-am-modal="{target: '#my-popup'}" id="btn" class="am-btn am-btn-secondary" type="button">选择</button></span>
                                </div>
                            </div>
                        </div>
                      
                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-lg-3 am-form-label">排序</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <input type="number" id="sort" class="am-radius" placeholder="">
                            </div>
                        </div>
                        <!-- <div class="am-form-group">
                            <label class="am-u-sm-4 am-u-md-3 am-form-label">其它</label>
                            <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                <textarea class="am-radius" rows="5" id="remark"></textarea>
                            </div>
                        </div> -->
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<!--模态窗口选择上级节点-->
<div class="am-modal am-modal-no-btn" tabindex="-1" style="z-index: 1301" id="my-popup">
    <div class="am-modal-dialog" style="width: 400px">
        <div class="am-modal-hd newBuild">
      请选择上级所属组织<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <input type="hidden" id="pname2" value="">
            <input type="hidden" id="pid2" value="">
            <div>
                <ul id="treeDemo2" class="ztree" style="background-color: #cccccc2e; border-radius: 5px"></ul>
            </div>
                    <button id="go" type="submit" class="am-btn am-radius am-btn-danger">确定</button>
                    <button class="am-btn am-btn-primary am-radius" data-am-modal-close>取消</button>
        </div>
    </div>
</div>
<!--模态窗口提示-->
<div  class="am-modal am-modal-alert " style="z-index: 1302" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd users"></div>
        <div class="am-modal-bd alert">
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>

<!--模态窗口新增-->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="modal1">
    <div class="am-modal-dialog" style="width: 700px">
        <div class="am-modal-hd">
            添加所属组织
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>
                x
                <!-- &times; -->
            </a>
        </div>
        <div class="am-modal-bd">
            <form method="post"  enctype="multipart/form-data" class="am-form am-form-horizontal" id="form3">
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">单位编号</label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <input type="text" id="organ_no1" class="am-radius" placeholder="">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">单位名称<span class="redStars">*</span></label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <input type="text" id="organ_name1" class="am-radius" placeholder="">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">联系人</label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <input type="text" id="short_name1" class="am-radius" placeholder="">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">单位电话</label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <input type="text" id="tel1" class="am-radius" placeholder="">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">联系人电话</label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <input type="text" id="work_tel1" class="am-radius" placeholder="">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">地址</label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <input type="text" id="email1" class="am-radius" placeholder="">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">上级组织<span class="redStars">*</span></label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <div class="am-input-group">
                            <input type="text" disabled class="am-form-field" id="pname1">
                            <input type="hidden" id="pid1">
                            <span class="am-input-group-btn"><button data-am-modal="{target: '#my-popup'}" id="btn2" class="am-btn am-btn-secondary" type="button">选择</button></span>
                        </div>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-lg-3 am-form-label">排序</label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <input type="number" id="sort1" class="am-radius" placeholder="">
                    </div>
                </div>
                <!-- <div class="am-form-group">
                    <label class="am-u-sm-4 am-u-md-3 am-form-label">其它</label>
                    <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                        <textarea class="am-radius" rows="5" id="remark1"></textarea>
                    </div>
                </div> -->
                    <button id="go2" type="submit" class="am-btn am-radius am-btn-danger" >确定</button>
                    <button class="am-btn am-radius am-btn-primary" data-am-modal-close>取消</button>
            </form>
        </div>
    </div>
</div>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="ztree/js/jquery.ztree.all.js"></script>
<script>
    //确定模态框
        $("#my-alert").on('close.modal.amui', function () {
            window.location.reload();
        });
            let token = sessionStorage.getItem("token");
    var zTreeObj;
    //树节点点击
    function zTreeOnClick(event, treeId, treeNode) {

        //取数据
        $.ajax({
            url: testurl + "/dept/detail",
            headers: {"Authorization": "Bearer " + token},
            contentType: "application/json",
            type: "POST",
            data: JSON.stringify({
                "id":treeNode.id
            }),
            success: function (data) {
                //treeId
                console.log(data)
                $("#treeId").val(treeNode.id);
                $("#organ_no").val(data.obj.no);
                $("#organ_name").val(data.obj.company_name);
                $("#short_name").val(data.obj.contacts);
                $("#tel").val(data.obj.phone);
                $("#work_tel").val(data.obj.contacts_phone);
                $("#email").val(data.obj.address);
                $("#pname").val(data.obj.company_name);
                //$("#is_handler1").val(data.obj.is_handler);
                $("#pid").val(data.obj.pid);
                //$("#level").val(data.obj.level);
                $("#sort").val(data.obj.sort);
                // $("#status").val(data.obj.status);
                //$("#remark").val(data.obj.remark);
            }
        });

    }


    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [];
    $(document).ready(function () {

        let name = sessionStorage.getItem("realname");
       


        var setting = {
            callback: {
                onClick: zTreeOnClick
            }
        };


        //获取树节点
        $.ajax({
            async: false,
            url: testurl + "/dept/tree/0",
            headers: {"Authorization": "Bearer " + token},
            type: "get",
            contentType: "application/json",
            data: {},
            success: function (data) {
                zNodes = data.obj;
            }
        });
        var setting2 = {
            callback: {
                onClick: zTreeOnClick2
            }
        };
        //获取点击的name
        function zTreeOnClick2(event, treeId, treeNode) {
            $("#pname2").val(treeNode.name);
            $("#pid2").val(treeNode.id);
        }
        //判断
        $("#btn").click(function () {
            $(".newBuild").attr("value","");
        });
        $("#btn2").click(function () {
            $(".newBuild").attr("value","11");
        });
        $("#go").click(function () {

            if ($("#pname2").attr("value") === ""){
                $(".users").html("提示");
                $(".alert").html("请选择上级所属组织！");
                $('#my-alert').modal({target: '#my-alert'});
            } else {
                if ($(".newBuild").attr("value") === "11"){
                    $("#pname1").val($("#pname2").attr("value"));
                    $("#pid1").val($("#pid2").attr("value"));
                    $('#my-popup').modal('close');
                } else {
                    $("#pname").val($("#pname2").attr("value"));
                    $("#pid").val($("#pid2").attr("value"));
                    $('#my-popup').modal('close');
                }

            }
        });
        //新增
        $("#go2").click(function () {
            let organ_no1 = $("#organ_no1").val();
            let organ_name1 = $("#organ_name1").val();
            let short_name1 = $("#short_name1").val();
            let tel1 = $("#tel1").val();
            let work_tel1 = $("#work_tel1").val();
            let pname1 = $("#pname1").val();
            let email1 = $("#email1").val();
            let pid1 = $("#pid1").val();
            let sort1 = $("#sort1").val();
            // let is_handler = $("#is_handler option:selected").val();
          
            //let remark1 = $("#remark1").val();
            // "no":"0012",
            // "pid":"3",
            // "":"村支部2",
            // "phone":"15315252608",
            // "contacts":"陈",
            // "address":"村支部地址",
            let str = { "no":organ_no1,
                        "pid":pid1,
                        "pName":pname1,
                        "company_name":organ_name1,
                        "phone":tel1,
                        "contacts":short_name1,
                        "contacts_phone":work_tel1,
                        "address":email1,
                        "sort":sort1
            };
            if(organ_name1 === "" || pid1 === ""){
                alert("请填写带*必填项！");
                return false;
            }else{
                $.ajax({
                    url: testurl + "/dept/add",
                    headers: { "Authorization": "Bearer " + token },
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(str),
                    success: function (data) {
                        if (data.success === true) {
                            $(".users").html("添加所属组织");
                            $(".alert").html("添加成功！");
                            $('#my-alert').modal({ target: '#my-alert' });
                            $('#modal1').modal('close');
                        } else {
                            $(".users").html("添加所属组织");
                            $(".alert").html("添加失败！");
                            $('#my-alert').modal({ target: '#my-alert' });
                            $('#modal1').modal('close');
                        }
                    }
                });
            }
         return false
        });

        //修改
        $("#save").click(function () {
            var treeId = $("#treeId").attr("value");
            if (treeId === ""){
                $(".users").html("更新所属组织");
                $(".alert").html("请选中要更新的组织！");
                $('#my-alert').modal({target: '#my-alert'});
                $('#modal1').modal('close');
            }else {
                let organ_no1 = $("#organ_no").val();
                let organ_name1 = $("#organ_name").val();
                let short_name1 = $("#short_name").val();
                let tel1 = $("#tel").val();
                let work_tel1 = $("#work_tel").val();
                let email1 = $("#email").val();
                let pid1 = $("#pid").val();
                let pname1 = $("#pname").val();
                // let status = $("#status option:selected").val();
                let sort1 = $("#sort").val();
                if(sort1 === ""){
                    sort1 = null;
                }
                //let remark1 = $("#remark").val();
                // let is_handler = $("#is_handler1 option:selected").val();
                let str = {
                    "id":treeId,
                    "no":organ_no1,
                    "pid":pid1,
                    "pName":pname1,
                    "company_name":organ_name1,
                    "phone":tel1,
                    "contacts":short_name1,
                    "contacts_phone":work_tel1,
                    "address":email1,
                    "sort":sort1
                };
                $.ajax({
                    url:testurl + "/dept/update",
                    headers: {"Authorization": "Bearer " + token},
                    type: "POST",
                    contentType: "application/json",
                    data:JSON.stringify(str),
                    success:function (data) {
                        if (data.success === true) {
                            $(".users").html("更新所属组织");
                            $(".alert").html("更新成功！");
                            $('#my-alert').modal({target: '#my-alert'});
                            $('#modal1').modal('close');
                        }else {
                            $(".users").html("更新所属组织");
                            $(".alert").html("更新失败！");
                            $('#my-alert').modal({target: '#my-alert'});
                            $('#modal1').modal('close');
                        }
                    }
                });
               
            }

        });
        //删除
        $("#delete").click(function () {
            var treeId = $("#treeId").attr("value");
            treeId=treeId.split(",");
            if (treeId == ""){
                $(".users").html("更新所属组织");
                $(".alert").html("请选中要删除的组织！");
                $('#my-alert').modal({target: '#my-alert'});
                $('#modal1').modal('close');
            } else {
                if(confirm("确定删除？")){
                    $.ajax({
                        url: testurl + "dept/deletes",
                        headers: { "Authorization": "Bearer " + token },
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            "ids":treeId
                        }),
                        success: function (data) {
                            if (data.success === true) {
                                $(".users").html("删除所属组织");
                                $(".alert").html("删除成功！");
                                $('#my-alert').modal({ target: '#my-alert' });
                                $('#modal1').modal('close');
                            } else {
                                $(".users").html("删除所属组织");
                                $(".alert").html("删除失败！");
                                $('#my-alert').modal({ target: '#my-alert' });
                                $('#modal1').modal('close');
                            }
                        }
                    })
                }
              
            }
        });
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, JSON.parse(zNodes));
        zTreeObj = $.fn.zTree.init($("#treeDemo2"), setting2, JSON.parse(zNodes));





    });
</script>
</body>
</html>